<nz-layout>
  <div class="l-group">
    <nz-input [nzType]="'search'" [nzPlaceHolder]="'输入原料名称/关联商品名称'" 
      [(ngModel)]="labelParams.labelName" style="width: 200px;" (nzOnSearch)="onSearch($event)"></nz-input>

    <!-- 操作 -->
    <div class="l-operate" style="float:right;">
      <nz-avatar nz-tooltip="添加" [nzShape]="'square'" *authority="['material/list/3']" [nzIcon]="'plus-square-o'"
        (click)="locationAddMaterial('')"
      ></nz-avatar>
      <nz-avatar nz-tooltip="删除" [nzShape]="'square'" *authority="['material/list/4']" [nzIcon]="'delete'" (click)="delete('')"></nz-avatar>
      <nz-avatar nz-tooltip="刷新" [nzShape]="'square'" [nzIcon]="'sync'" (click)="refresh()"></nz-avatar>
    </div>
  </div>
  
  <div class="l-group">
    <nz-table #nzTable [nzAjaxData]="data" 
      [nzLoading]="_loading"
      [nzTotal]="labelParams.totalPages"
      [(nzPageIndex)]="labelParams.pageNumber"
      [(nzPageSize)]="labelParams.pageSize"
      (nzPageIndexChange)="pageChange(true)"
      (nzPageSizeChange)="pageChange(true)"
      [nzScroll]="{y:300}"
      nzBordered nzShowSizeChanger>
      <ng-template #nzFixedHeader>
          <thead nz-thead>
            <tr>
              <th nz-th nzCheckbox [nzWidth]="'10px'">
                <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
                </label>
              </th>
              <th nz-th [nzWidth]="'300px'"><span>原料名称</span></th>
              <th nz-th [nzWidth]="'80px'"><span>用量单位</span></th>
              <th nz-th [nzWidth]="'300px'"><span>关联商品</span></th>
              <th nz-th [nzWidth]="'80px'"><span>用量规格</span></th>
              <th nz-th [nzWidth]="'150px'"><span>创建日期</span></th>
              <th nz-th [nzWidth]="'50px'"><span>操作</span></th>
            </tr>
          </thead>
      </ng-template>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td nzCheckbox>
            <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
            </label>
          </td>
          <td nz-td>
            {{data.name}}
          </td>
          <td nz-td>{{data.unit | enum: unitType}}</td>
          <td nz-td style="padding: 0;">
            <div class="material-product" *ngFor="let product of data.goods;let i = index;">
              {{product.name}}
              <!-- star 推荐 -->
              <span class="m-star" *ngIf="product.recomflag == 1">
                <i class="anticon anticon-heart"></i>
                推荐
              </span>
            </div>
          </td>
          <td nz-td style="padding: 0;">
            <div class="material-product" *ngFor="let product of data.goods;let i = index;">
              {{ product.dosage || 0 }} {{ data.unit | enum: unitType }}
            </div>
          </td>
          <td nz-td>{{data.creatDate | date: 'yyyy-MM-dd HH:mm'}}</td>
          <td nz-td>
            <nz-dropdown [nzPlacement]="'bottomRight'">
              <a class="ant-dropdown-link" nz-dropdown>
                <i class="anticon anticon-ellipsis"></i>
              </a>
              <ul nz-menu>
                <li nz-menu-item *authority="['material/list/2']">
                  <a rel="noopener noreferrer" (click)="locationAddMaterial(data)">编辑</a>
                </li>
                <li nz-menu-item *authority="['material/list/4']">
                  <a rel="noopener noreferrer" (click)="delete(data)">删除</a>
                </li>
              </ul>
            </nz-dropdown>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

</nz-layout>